
import { FC, forwardRef, useImperativeHandle, useState } from "react"
//声明props类型
type Iprops = {
    // onInputChange: (val: string) => void
    onAddTodo: () => void
}
// const TodoInput: FC<Iprops> = (props) => {
//     let { val, onInputChange } = props

//     //onChange处理函数

//     let handleChange = (e: any) => {
//         console.log(e.target.value)
//         onInputChange(e.target.value)
//     }

//     return (
//         <fieldset>
//             <legend>输入组件</legend>
//             <input type="text" value={val} onChange={handleChange} />
//             <button>提交</button>
//         </fieldset>
//     )
// }


const TodoInput = forwardRef<string, Iprops>((props, ref) => {
    let { onAddTodo } = props

    let [value, setValue] = useState<string>("")
    //onChange处理函数
    //将输入值通过ref暴露给父组件
    useImperativeHandle(ref, () => {
        return value
    })

    let handleChange = (e: any) => {
        setValue(e.target.value)
    }

    return (
        <fieldset>
            <legend>输入组件</legend>
            <input type="text" value={value} onChange={handleChange} />
            <button onClick={()=>{
                onAddTodo()
                setValue("")
            }}>提交</button>
        </fieldset>
    )
})

export default TodoInput